<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色权限管理</title>
</head>
<body>
<div style="padding:10px;background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">系统管理/角色权限管理</div>
                <div class="layui-card-body">
                    <!--数据表格-->
                    <form class="layui-form" style="margin-bottom: 20px">
                            <div class="layui-inline">
                                <label class="layui-form-label">角色名称</label>
                                <div class="layui-input-inline">
                                    <select name="role_id" id="role_id" lay-filter="role_id">
                                        <option value="">请选择</option>

                                    </select>
                                </div>
                            </div>
                    </form>
                    <div id="test4" class="demo-transfer" style="margin-left: 50px"></div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    </fieldset>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" id="update"  lay-event="add_employee">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<!--<script src="../../js/jquery-3.4.1.js"></script>-->
<script>
    layui.use(['transfer', 'layer', 'util','form'], function(){
        var $=layui.$,
            transfer = layui.transfer
            ,layer = layui.layer
            ,form=layui.form
            ,util = layui.util;
            form.render("select");

        $.ajax({
            url:"/queryRoleAll.do",
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.code == 0){
                    $.each(data.data, function (index, value) {
                        $('select[name=role_id]').append(new Option(value.role_name,value.role_id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            }
        });
        var mycars = new Array();


        form.on('select(role_id)', function(data) {
            var dataAll;
            var  role_id=$("#role_id").val();
            $.ajax({
                url:"/queryAuthorityAll.do",
                type:"post",
                data:{role_id:role_id},
                dataType:"json",
                success:function (data) {
                    console.log(data.data);
                    for (var i=0;i<data.data[0].length;i++)
                    {
                        mycars.push(data.data[0][i].value)
                    }
                    transfer.render({
                        elem: '#test4'
                        ,data: data.data[1]
                        ,value:mycars
                        ,title: ['未有权限', '已有权限']
                        ,showSearch: true
                        ,id:"test"
                    });
                }
            });

            $("#update").click(function (re) {
                var getData = transfer.getData('test');
                var data=JSON.stringify(getData);
                $.ajax({
                    url:"/updateAuthority.do",
                    type:"post",
                    data:{role_id:role_id,data:data},
                    dataType:"json",
                    success:function (data) {
                        if (data.code == 200){
                            layer.msg(data.msg,{icon:1});
                            transfer.reload('test', {
                                title: ['未有权限', '已有权限']
                            });
                        } else {
                            layer.msg(data.msg,{icon:5});
                        }

                    }
            })
        });
        });
        });


</script>

</html>